@import "app.scss";

.df-index-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  .tenantwarp {
    margin-top: 20rpx;
    position: absolute;
    top: 44rpx;
    left: 22rpx;
    z-index: 9;
  }

  .df-index-banner {
    position: relative;
    width: r(375);
    height: r(218);
    background-color: #327BFD;

    .welcome {
      position: absolute;
      top: 50%;
      left: r(8);
      transform: translateY(-50%);
      color: #fff;
      z-index: 9;

      .maintitle {
        font-size: 20px;
      }

      .subtitle {
        margin-top: r(6);
        font-size: 14px;
      }
    }

    .banner-img {
      position: absolute;
      top: r(-46);
      left: 0;
      width: r(170);
      height: r(192);

      .bg-img {
        width: 100%;
        height: 100%;
      }
    }

    .machine-img {
      position: absolute;
      right: r(5);
      bottom: 0;
      width: r(99);
      height: r(117);

      .mhe-img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .df-index-content {
    background: #E5EFF8;
    flex: 1;
    // display: flex;
    // flex-direction: column;

    .df-index-commonapp {
      width: r(359);
      // height: r(80);
      border-radius: r(16);
      margin-left: r(8);
      background-color: #fff;
      padding: r(8) r(13);
      transform: translateY(-40px);

      .commonapp-title {
        margin-bottom: r(8);
      }

      .title-right {
        height: 100%;
        padding: 0 r(5);
        font-size: 20px;
      }
    }

    .df-index-allapp {
      width: r(359);
      // height: r(80);
      // flex: 1;
      border-radius: r(16);
      margin-left: r(8);
      background-color: #fff;
      padding: r(8) r(13);

      .allapp-content {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: r(13);

        .appitem {
          width: 200rpx;
          margin-top: r(13);
        }
      }
    }
  }

}